<template>
  <div style="margin: 30px 80px">
    <div style="background-color:navajowhite">
      <p style="size: A3">维数金融将根据您填写的信息进行初步审核，您填写的信息资料越真实详尽，您申请融资的审批通过率越高。同时，我们有严格的用户信息操作规范.</p>
      <p style="color: red">确保您的隐私不被泄露，请勿填写虚假信息。</p>
    </div>
    <!--    租房合同查询列表-->
    <el-dialog title="房产查询" :visible.sync="dialogTableVisible">
      <el-form :inline="true" :model="cfContract" class="demo-form-inline">
        <el-form-item label="小区名称">
          <el-input v-model="cfContract.premiseName" placeholder="小区名称模糊查询"></el-input>
        </el-form-item>
        <el-form-item label="租客名称">
          <el-input v-model="cfContract.tenantName" placeholder="租客名称模糊查询"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchCfContract">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="cfContracts">
        <el-table-column property="id" label="合同id"></el-table-column>
        <el-table-column property="tenantName" label="租客姓名"></el-table-column>
        <el-table-column property="premiseName" label="小区名称"></el-table-column>
        <el-table-column property="roomName" label="承租房间"></el-table-column>
        <el-table-column
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button
              @click="pitch(scope.$index, scope.row)"
              type="text"
              size="small">
              选中
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :total="total">
      </el-pagination>
    </el-dialog>

    <el-form ref="elForm" :model="rentInstallment" :rules="rules" size="medium" label-width="100px"
             label-position="left">
      <el-row>
        <el-col :span="8">
          <el-form-item label-width="140px" label="租房合同编号" prop="cfContractId">
            <el-input v-model="rentInstallment.cfContractId" placeholder="请输入租房合同编号" :disabled='true'
                      clearable :style="{width: '80%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label-width="1px" label="">
            <el-button type="warning" icon="el-icon-search" size="medium" @click="searchCfContract"> 租房合同查询 </el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label-width="140px" label="承租房间" prop="roomName">
            <el-input v-model="rentInstallment.roomName" placeholder="请输入承租房间" :disabled='true' clearable
                      :style="{width: '80%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="140px" label="房产编号" prop="houseId">
            <el-input v-model="rentInstallment.houseId" placeholder="请输入房产编号" :disabled='true' clearable
                      :style="{width: '80%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label-width="140px" label="租客姓名" prop="tenantName">
            <el-input v-model="rentInstallment.tenantName" placeholder="请输入租客姓名" :disabled='true' clearable
                      :style="{width: '80%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="140px" label="租客手机号" prop="tenantPhone">
            <el-input v-model="rentInstallment.tenantPhone" placeholder="请输入租客手机号" :disabled='true' clearable
                      :style="{width: '80%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label-width="140px" label="租客身份证号" prop="tenantCardNo">
            <el-input v-model="rentInstallment.tenantCardNo" placeholder="请输入租客身份证号" :disabled='true'
                      clearable :style="{width: '80%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label-width="140px" label="金融产品选择" prop="jrProductId">
            <el-select v-model="rentInstallment.jrProductId" placeholder="请选择金融产品选择" clearable
                       :style="{width: '80%'}" @change="changeProduct">
              <el-option v-for="(item, index) in jrProductIdOptions" :key="index" :label="item.jrProductName"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="140px" label="公寓承担" prop="businessRate">
            <el-input v-model="rentInstallment.businessRate" placeholder="请输入公寓承担" clearable
                      :style="{width: '80%'}" @blur="changeRate">
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label-width="80px" label="租客承担" prop="tenantRate">
            <el-input v-model="rentInstallment.tenantRate" placeholder="请输入租客承担" clearable
                      :style="{width: '80%'}" @blur="changeRate">
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label-width="70px" label="年利率" prop="rate">
            <el-input v-model="rentInstallment.rate" placeholder="请输入年利率" :disabled='true' clearable
                      :style="{width: '80%'}">
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label-width="140px" label="借款金额" prop="loanAmount">
            <el-input v-model="rentInstallment.loanAmount" placeholder="请输入借款金额" :disabled='true' clearable
                      :style="{width: '80%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="140px" label="年一次性服务费率" prop="serviceFee">
            <el-input v-model="rentInstallment.serviceFee" placeholder="请输入年一次性服务费率" clearable
                      :style="{width: '80%'}">
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label-width="140px" label="借款期限" prop="monthLimit">
            <el-input v-model="rentInstallment.monthLimit" placeholder="/月" clearable
                      :style="{width: '80%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="140px" label="授信额度" prop="creditLine">
            <el-input v-model="rentInstallment.creditLine" :disabled='true' clearable
                      :style="{width: '80%'}">
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="1px" label="">
            <el-button type="warning" size="medium" @click="getLoanAmount"> 金融计算器 </el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="16">
          <el-form-item label-width="140px" label="备注" prop="remarks">
            <el-input v-model="rentInstallment.remarks" type="textarea" placeholder="请输入备注"
                      :autosize="{minRows: 4, maxRows: 4}" :style="{width: '80%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item size="large">
        <el-button type="warning" @click="submitForm">提交申请</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {getLoanAmount, productList, saveRentInstallment, searchCfContract} from "@/api/banking/installment/installment";

export default {
  components: {},
  props: [],
  data() {
    return {
      cfContracts:[],
      dialogTableVisible:false,
      cfContract:{
        tenantName: undefined,
        premiseName:undefined,
        current:1,
        size:10,
      },
      total:undefined,
      rentInstallment: {
        bussinessId:undefined,
        deptId:undefined,
        cfContractId: undefined,
        field103: undefined,
        roomName: undefined,
        houseId: undefined,
        tenantName: undefined,
        tenantPhone: undefined,
        tenantCardNo: undefined,
        jrProductId: undefined,
        businessRate: 0,
        tenantRate: 0,
        rate: 0,
        loanAmount: undefined,
        serviceFee: 0,
        monthLimit: undefined,
        creditLine: undefined,
        remarks: undefined,
      },
      rules: {
        cfContractId: [{
          required: true,
          message: '请输入租房合同编号',
          trigger: 'blur'
        }],
        roomName: [{
          required: true,
          message: '请输入承租房间',
          trigger: 'blur'
        }],
        houseId: [{
          required: true,
          message: '请输入房产编号',
          trigger: 'blur'
        }],
        tenantName: [{
          required: true,
          message: '请输入租客姓名',
          trigger: 'blur'
        }],
        tenantPhone: [{
          required: true,
          message: '请输入租客手机号',
          trigger: 'blur'
        }],
        tenantCardNo: [{
          required: true,
          message: '请输入租客身份证号',
          trigger: 'blur'
        }],
        jrProductId: [{
          required: true,
          message: '请选择金融产品选择',
          trigger: 'change'
        }],
        businessRate: [{
          required: true,
          message: '请输入公寓承担',
          trigger: 'blur'
        }],
        tenantRate: [{
          required: true,
          message: '请输入租客承担',
          trigger: 'blur'
        }],
        rate: [{
          required: true,
          message: '请输入年利率',
          trigger: 'blur'
        }],
        loanAmount: [{
          required: true,
          message: '请输入借款金额',
          trigger: 'blur'
        }],
        serviceFee: [{
          required: true,
          message: '请输入年一次性服务费率',
          trigger: 'blur'
        }],
        monthLimit: [{
          required: true,
          message: '/月',
          trigger: 'blur'
        }],
        creditLine: [],
        remarks: [],
      },
      jrProductIdOptions: [],
    }
  },
  methods: {
    searchCfContract(){
      this.dialogTableVisible = true;
      searchCfContract(this.cfContract).then(res=>{
        this.cfContracts = res.msgData.records;
        this.total = res.msgData.total;
      })
    },
    pitch(index, row){
      console.log("row",row)
      this.rentInstallment.cfContractId = row.id;
      this.rentInstallment.roomName = row.roomName;
      this.rentInstallment.houseId = row.houseId;
      this.rentInstallment.tenantName = row.tenantName;
      this.rentInstallment.tenantPhone = row.tenantPhone;
      this.rentInstallment.tenantCardNo = row.tenantCardNo;

      this.rentInstallment.bussinessId = row.businessId;
      this.rentInstallment.deptId = row.deptId;
      this.rentInstallment.deptNo = row.deptNo;
      this.rentInstallment.outOrderNo = row.cfContractNo;
      this.dialogTableVisible = false;

    },
    getLoanAmount(){
      console.log("this.rentInstallment.cfContractId",this.rentInstallment.cfContractId)
      if(!this.rentInstallment.cfContractId){
        this.$alert("请先选择租房合同")
        return;
      }
      getLoanAmount({cfContractId:this.rentInstallment.cfContractId}).then(res=>{
        this.rentInstallment.loanAmount = res.msgData;
      })
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.cfContract.current = val;
      this.houseInfoPage();
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
        saveRentInstallment(this.rentInstallment).then(res=>{
          this.$message.success("保存成功")
          const obj = { path: "/banking/applicationscheck"};
          this.$tab.closeOpenPage(obj);
        })
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    productList() {
      productList().then(res=>{
        this.jrProductIdOptions = res.msgData;
      })
    },
    changeProduct(a){
      console.log("金融产品选中id:",a)
      this.jrProductIdOptions.some(product=>{
        if(!this.rentInstallment.jrProductId){
          this.rentInstallment.monthLimit = undefined;
          this.rentInstallment.creditLine = undefined;
        }
        if(product.id == a){
          this.rentInstallment.monthLimit = product.instalmentPeriod;
          this.rentInstallment.creditLine = product.creditLine;
          return
        }
      })
    },
    //计算利率
    changeRate(){
      this.rentInstallment.rate = Number(this.rentInstallment.businessRate) + Number(this.rentInstallment.tenantRate);
    }
  },
  created() {
    this.productList();
  }
}

</script>
<style>
</style>
